<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>智能选课系统 - 登录</title>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
		:root {
			--primary-gradient: linear-gradient(135deg, #667eea, #764ba2);
			--primary-gradient-alt: linear-gradient(135deg, #ff6b6b, #ffa500);
			--secondary-gradient: linear-gradient(135deg, #1d976c, #93f9b9);
			--accent-gradient: linear-gradient(135deg, #50c9c3, #96deda);
			--dark-bg: #0f1116;
			--card-bg: rgba(30, 33, 42, 0.7);
			--border-color: rgba(255, 255, 255, 0.1);
			--text-primary: #ffffff;
			--text-secondary: #b0b0b0;
			--success: #28a745;
			--danger: #dc3545;
			--warning: #ffc107;
			--info: #17a2b8;
			--transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			background: var(--dark-bg);
			color: var(--text-primary);
			min-height: 100vh;
			position: relative;
			overflow-x: hidden;
		}

		/* 背景动画 */
		.background-animation {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -2;
			background: linear-gradient(45deg, #0f0c29, #302b63, #24243e);
			background-size: 400% 400%;
			animation: gradientBG 15s ease infinite;
		}

		@keyframes gradientBG {
			0% { background-position: 0% 50%; }
			50% { background-position: 100% 50%; }
			100% { background-position: 0% 50%; }
		}

		/* 粒子效果 */
		.particles {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			overflow: hidden;
		}

		.particle {
			position: absolute;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.1);
			animation: float 15s infinite linear;
		}

		@keyframes float {
			0% {
				transform: translateY(0) translateX(0) rotate(0deg);
				opacity: 0;
			}
			10% {
				opacity: 1;
			}
			90% {
				opacity: 1;
			}
			100% {
				transform: translateY(-1000px) translateX(1000px) rotate(720deg);
				opacity: 0;
			}
		}

		/* 容器 */
		.container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 20px;
			position: relative;
			z-index: 1;
		}

		/* 卡片样式 */
		.modern-card {
			background: var(--card-bg);
			border-radius: 20px;
			box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
			padding: 30px;
			position: relative;
			overflow: hidden;
			backdrop-filter: blur(12px);
			border: 1px solid var(--border-color);
			transition: var(--transition);
			margin-bottom: 25px;
		}

		.modern-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7);
		}

		.modern-card::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4px;
			background: var(--primary-gradient);
			border-radius: 20px 20px 0 0;
		}

		/* 标题样式 */
		.modern-header {
			text-align: center;
			margin-bottom: 30px;
			padding: 20px 0;
		}

		.modern-header h1 {
			font-size: 2.8rem;
			font-weight: 800;
			margin-bottom: 15px;
			background: var(--primary-gradient);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-shadow: 0 2px 10px rgba(102, 126, 234, 0.2);
		}

		.modern-header p {
			color: var(--text-secondary);
			font-size: 1.2rem;
			max-width: 700px;
			margin: 0 auto;
			line-height: 1.6;
		}

		/* 表单样式 */
		.form-group {
			margin-bottom: 25px;
			position: relative;
		}

		.form-group label {
			display: block;
			margin-bottom: 10px;
			color: var(--text-primary);
			font-weight: 500;
			font-size: 1.1rem;
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.form-control {
			width: 100%;
			padding: 16px 20px;
			border: 2px solid var(--border-color);
			border-radius: 12px;
			font-size: 16px;
			color: var(--text-primary);
			background-color: rgba(0, 0, 0, 0.2);
			transition: var(--transition);
		}

		.form-control:focus {
			border-color: #667eea;
			outline: none;
			box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
			background-color: rgba(0, 0, 0, 0.3);
		}

		.form-control::placeholder {
			color: #6c757d;
		}

		select.form-control {
			appearance: none;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 20px center;
			background-size: 20px;
			padding-right: 50px;
		}

		/* 按钮样式 */
		.btn {
			padding: 16px 28px;
			border: none;
			border-radius: 12px;
			font-size: 16px;
			font-weight: 600;
			cursor: pointer;
			transition: var(--transition);
			display: inline-flex;
			justify-content: center;
			align-items: center;
			gap: 10px;
			text-decoration: none;
			position: relative;
			overflow: hidden;
			z-index: 1;
		}

		.btn::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--primary-gradient);
			z-index: -1;
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		.btn:hover::before {
			opacity: 1;
		}

		.btn-primary {
			background: var(--primary-gradient);
			color: white;
			box-shadow: 0 10px 25px -5px rgba(102, 126, 234, 0.3);
		}

		.btn-primary:hover {
			transform: translateY(-3px);
			box-shadow: 0 15px 30px -5px rgba(102, 126, 234, 0.4);
		}

		.btn-secondary {
			background: rgba(255, 255, 255, 0.1);
			color: var(--text-primary);
			border: 2px solid var(--border-color);
		}

		.btn-secondary:hover {
			background: rgba(255, 255, 255, 0.2);
			transform: translateY(-3px);
			box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
		}

		.btn-success {
			background: var(--secondary-gradient);
			color: white;
			box-shadow: 0 10px 25px -5px rgba(29, 151, 108, 0.3);
		}

		.btn-success:hover {
			transform: translateY(-3px);
			box-shadow: 0 15px 30px -5px rgba(29, 151, 108, 0.4);
		}

		.btn-danger {
			background: var(--primary-gradient-alt);
			color: white;
			box-shadow: 0 10px 25px -5px rgba(255, 107, 107, 0.3);
		}

		.btn-danger:hover {
			transform: translateY(-3px);
			box-shadow: 0 15px 30px -5px rgba(255, 107, 107, 0.4);
		}

		.btn-block {
			width: 100%;
			display: flex;
			justify-content: center;
		}

		/* 菜单样式 */
		.menu-item {
			margin-bottom: 15px;
			border-radius: 12px;
			overflow: hidden;
			transition: var(--transition);
			background: var(--card-bg);
			backdrop-filter: blur(10px);
			border: 1px solid var(--border-color);
		}

		.menu-item:hover {
			transform: translateY(-3px);
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
		}

		.menu-header {
			background: var(--primary-gradient);
			color: white;
			padding: 18px 20px;
			cursor: pointer;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 600;
			font-size: 1.2rem;
			transition: var(--transition);
		}

		.menu-header i {
			transition: transform 0.3s ease;
		}

		.menu-header.active i {
			transform: rotate(180deg);
		}

		.submenu {
			background: rgba(0, 0, 0, 0.1);
			padding: 0;
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.4s ease, padding 0.4s ease;
		}

		.submenu.active {
			max-height: 500px;
			padding: 10px 0;
		}

		.submenu-item {
			padding: 15px 20px 15px 40px;
			display: block;
			color: var(--text-primary);
			text-decoration: none;
			transition: var(--transition);
			border-left: 3px solid transparent;
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.submenu-item:hover {
			background: rgba(102, 126, 234, 0.2);
			color: #ffffff;
			border-left: 3px solid #667eea;
			text-decoration: none;
			padding-left: 45px;
		}

		.single-item {
			background: linear-gradient(135deg, #2d3748, #4a5568);
			color: white;
			padding: 18px 20px;
			display: block;
			text-decoration: none;
			border-radius: 12px;
			transition: var(--transition);
			margin-bottom: 15px;
			font-weight: 600;
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.single-item:hover {
			background: var(--primary-gradient);
			color: white;
			text-decoration: none;
			transform: translateY(-3px);
			box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
		}

		.logout-item {
			background: var(--primary-gradient-alt);
		}

		/* 表格样式 */
		.table-container {
			overflow-x: auto;
			border-radius: 15px;
			margin-bottom: 25px;
			box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.3);
		}

		table {
			width: 100%;
			border-collapse: collapse;
			background: rgba(30, 33, 42, 0.5);
			border-radius: 15px;
			overflow: hidden;
		}

		th, td {
			padding: 18px 20px;
			text-align: left;
			border-bottom: 1px solid var(--border-color);
		}

		th {
			background: rgba(102, 126, 234, 0.2);
			font-weight: 600;
			color: var(--text-primary);
		}

		tr:last-child td {
			border-bottom: none;
		}

		tr:hover td {
			background: rgba(102, 126, 234, 0.1);
		}

		/* 响应式设计 */
		@media (max-width: 768px) {
			.container {
				padding: 15px;
			}
			
			.modern-header h1 {
				font-size: 2.2rem;
			}
			
			.modern-card {
				padding: 20px 15px;
			}
			
			.btn {
				padding: 14px 20px;
				width: 100%;
				margin-bottom: 10px;
			}
			
			th, td {
				padding: 12px 15px;
				font-size: 0.9rem;
			}
		}

		/* 加载动画 */
		.btn-loading {
			position: relative;
			color: transparent !important;
		}

		.btn-loading::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 20px;
			height: 20px;
			margin: -10px 0 0 -10px;
			border: 2px solid transparent;
			border-top: 2px solid #fff;
			border-radius: 50%;
			animation: spin 0.8s linear infinite;
		}

		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}

		/* 返回链接 */
		.back-link {
			display: inline-block;
			margin-bottom: 20px;
			color: #667eea;
			text-decoration: none;
			font-weight: 500;
			transition: var(--transition);
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.back-link:hover {
			color: #764ba2;
			text-decoration: underline;
		}

		/* 系统信息 */
		.system-info {
			text-align: center;
			margin-top: 30px;
			color: var(--text-secondary);
			font-size: 14px;
			font-weight: 400;
		}

		/* 动画效果 */
		@keyframes fadeInUp {
			from {
				opacity: 0;
				transform: translateY(30px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.fade-in-up {
			animation: fadeInUp 0.6s ease forwards;
		}

		/* 徽章样式 */
		.badge {
			display: inline-block;
			padding: 5px 12px;
			border-radius: 20px;
			font-size: 0.8rem;
			font-weight: 600;
			text-transform: uppercase;
		}

		.badge-primary {
			background: var(--primary-gradient);
			color: white;
		}

		.badge-success {
			background: var(--secondary-gradient);
			color: white;
		}

		.badge-warning {
			background: var(--accent-gradient);
			color: #000;
		}

		/* 用户信息栏 */
		.user-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px 20px;
			margin-bottom: 25px;
			background: var(--card-bg);
			border-radius: 15px;
			backdrop-filter: blur(10px);
			border: 1px solid var(--border-color);
		}

		.user-info h3 {
			margin: 0;
			font-weight: 600;
			color: var(--text-primary);
		}

		.user-info .welcome-text {
			color: var(--text-secondary);
			font-size: 1rem;
		}

		/* 消息提示 */
		.alert {
			padding: 15px 20px;
			border-radius: 12px;
			margin-bottom: 20px;
			border: 1px solid transparent;
		}

		.alert-success {
			background: rgba(40, 167, 69, 0.2);
			border-color: rgba(40, 167, 69, 0.3);
			color: #a2fca2;
		}

		.alert-danger {
			background: rgba(220, 53, 69, 0.2);
			border-color: rgba(220, 53, 69, 0.3);
			color: #f8b6b6;
		}

		.alert-warning {
			background: rgba(255, 193, 7, 0.2);
			border-color: rgba(255, 193, 7, 0.3);
			color: #ffeaa7;
		}

		.alert-info {
			background: rgba(23, 162, 184, 0.2);
			border-color: rgba(23, 162, 184, 0.3);
			color: #a8e6ff;
		}
		
		.logo-icon {
			margin-bottom: 20px;
		}
		
		.logo-icon i {
			font-size: 3rem;
			background: var(--primary-gradient);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		
		.btn-container {
			display: flex; 
			gap: 15px; 
			margin-top: 30px;
		}.back-btn {
			 display: block;
			 text-align: center;
			 margin-top: 25px;
		 }

		.back-btn a {
			display: inline-block;
			padding: 10px 20px;
			background: linear-gradient(135deg, #95a5a6, #7f8c8d);
			color: white;
			border-radius: 5px;
			text-decoration: none;
			transition: all 0.3s ease;
		}

		.back-btn a:hover {
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			text-decoration: none;
			color: white;
		}
	</style>
	<script>
		function check() {
			var username = document.forms.form1.username.value;
			var pwd = document.forms.form1.pwd.value;
			var userSort = document.forms.form1.UserSort.value;

			if (username == null || username == "") {
				alert("请输入用户名！");
				return false;
			}
			if (pwd == null || pwd == "") {
				alert("请输入密码");
				return false;
			}
			if (userSort == null || userSort == "") {
				alert("请选择用户类别");
				return false;
			}

			// 添加加载效果
			var loginBtn = document.querySelector('.btn-primary');
			loginBtn.classList.add('btn-loading');
			loginBtn.disabled = true;

			return true;
		}

		// 页面加载完成后添加一些交互效果
		document.addEventListener('DOMContentLoaded', function() {
			// 创建背景粒子效果
			const particlesContainer = document.querySelector('.particles');
			const particleCount = 50;
			
			for (let i = 0; i < particleCount; i++) {
				const particle = document.createElement('div');
				particle.classList.add('particle');
				
				// 随机设置粒子大小
				const size = Math.random() * 20 + 5;
				particle.style.width = `${size}px`;
				particle.style.height = `${size}px`;
				
				// 随机设置粒子位置
				particle.style.left = `${Math.random() * 100}%`;
				particle.style.top = `${Math.random() * 100}%`;
				
				// 随机设置动画延迟和持续时间
				const delay = Math.random() * 15;
				const duration = 15 + Math.random() * 10;
				particle.style.animationDelay = `${delay}s`;
				particle.style.animationDuration = `${duration}s`;
				
				particlesContainer.appendChild(particle);
			}
			
			// 添加视差滚动效果
			document.addEventListener('mousemove', (e) => {
				const x = (window.innerWidth - e.pageX) / 50;
				const y = (window.innerHeight - e.pageY) / 50;
				particlesContainer.style.transform = `translateX(${x}px) translateY(${y}px)`;
			});
		});
	</script>
</head>
<body>
	<!-- 背景动画 -->
	<div class="background-animation"></div>
	
	<!-- 背景粒子效果 -->
	<div class="particles"></div>

	<div class="container">
		<div class="modern-card fade-in-up" style="max-width: 500px; margin: 2rem auto;">
			<div class="modern-header">
				<div class="logo-icon">
					<i class="fas fa-graduation-cap"></i>
				</div>
				<h1>智能选课系统</h1>
				<p>开启您的智慧学习之旅</p>
			</div>

			<form action="Login_Servlet" method="post" name="form1" id="form1" onsubmit="return check();">
				<div class="form-group">
					<label for="UserSort"><i class="fas fa-users"></i> 用户类别</label>
					<select name="UserSort" id="UserSort" class="form-control">
						<option value="学生">学生</option>
						<option value="教师">教师</option>
						<option value="管理员">管理员</option>
					</select>
				</div>

				<div class="form-group">
					<label for="username"><i class="fas fa-user"></i> 用户名</label>
					<input name="username" type="text" id="username" maxlength="20" class="form-control" placeholder="请输入用户名" required>
				</div>

				<div class="form-group">
					<label for="pwd"><i class="fas fa-lock"></i> 密码</label>
					<input name="pwd" type="password" id="pwd" maxlength="20" class="form-control" placeholder="请输入密码" required>
				</div>

				<div class="btn-container">
					<input name="Submit" type="submit" value="登录" class="btn btn-primary">
					<input name="reset" type="reset" value="重置" class="btn btn-secondary">
				</div>
			</form>

			<div class="back-btn">
				<a href="javascript:history.back()"><i class="fas fa-arrow-left"></i> 返回</a>
			</div>

			<div class="system-info" style="margin-top: 30px;">
				智能选课系统 © 2025 | 为未来教育而设计
			</div>
		</div>
	</div>
</body>
</html>